﻿@model IEnumerable<ViewArticleCate>

@{
    ViewData["Title"] = "类别列表";
}

<div class="content-top-nav">
    <h3 style="color:#444"><i class="layui-icon layui-icon-home"></i>@ViewData["Title"] </h3>
    <hr>
</div>
<div class="layui-fluid" style="margin-bottom:50px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-btn-container">
                <div class="layui-btn-group">
                    @if (await Authorizer.AuthView(PermissionKeys.Category_AddOrEdit))
                    {
                        <button class="layui-btn layui-btn-sm data-add-btn"><i class="layui-icon">&#xe642;</i>新增</button>
                    }
                    <button id="btnExpandAll" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe622;</i> 全部展开 </button>
                    <button id="btnFoldAll" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe758;</i> 全部折叠 </button>
                </div>
            </div>

            <table class="layui-hide" id="currentTableId" lay-data="{id: 'idReload'}" lay-filter="currentTableFilter"></table>
            <script type="text/html" id="icoTableBar">
                <i class="layui-icon {{d.ico}}"></i>
            </script>
            <script type="text/html" id="cateUrlTpl">
                {{d.title}}
            </script>
            <script type="text/html" id="TypeTpl">
                {{# if(d.type==1){ }}
                 <b style="color:red">频道</b>
                {{# }else if(d.type==2){ }}
                 <b style="color:green">信息报送</b>
                {{# }else if(d.type==3){ }}
                 <b style="color:yellowgreen">收文</b>
                {{# } else if(d.type==4){ }}
                 <b style="color:blue">工作报表</b>
                {{#  } }}
            </script>
            <script type="text/html" id="currentTableBar">
                 <div class="layui-btn-group">
                    @if (await Authorizer.AuthView(PermissionKeys.Category_AddOrEdit))
                    {
                        <a class="layui-btn layui-btn-sm data-count-edit" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
                    }
                    @if (await Authorizer.AuthView(PermissionKeys.Category_Delete))
                    {
                        <a class="layui-btn layui-btn-sm layui-btn-danger data-count-delete" lay-event="delete"><i class="layui-icon">&#xe640;</i>删除</a>
                    }
                </div>
            </script>
        </div>
    </div>
</div>

<script>
    layui.define(['treeTable'], function () {
        var $ = layui.jquery,
            treeTable = layui.treeTable,
            form = layui.form;

        var insTb = treeTable.render({
            elem: '#currentTableId',
            text: {
                none: '<div style="padding: 18px 0;">无数据</div>'
            },
            url: '/Admin/Category/Index?json=1',
            tree: {
                iconIndex: 1,  // 折叠图标显示在第几列
                idName: 'id',  // 自定义id字段的名称
                pidName: 'pid',
                haveChildName: 'havechild',  // 自定义标识是否还有子节点的字段名称
                isPidData: true,  // 是否是pid形式数据
                arrowType: 'arrow2',   // 自定义箭头风格
                initLevel: 5,
                getIcon: function (d) {  // 自定义图标
                    // d是当前行的数据
                    if (d.haveChild) {  // 判断是否有子集
                        return '<i class="ew-tree-icon ew-tree-icon-folder"></i>';
                    } else {
                        return '<i class="ew-tree-icon ew-tree-icon-file"></i>';
                    }
                }
            },
            cols: [
                { field: 'id', width: 50, title: 'ID' },
                { field: 'title', title: '类别', width: 300, templet: '#cateUrlTpl' },
                { field: 'type', title: '模型', templet: '#TypeTpl' },
                { field: 'sort', title: '排序', width: 60, edit: 'text' },
                //{ field: 'miji', title: '密级定义' },
                //{ field: 'ctheme', title: '内容模板' },
                // { field: 'ico', title: '图标' ,width: 80, minWidth: 50, templet: '#icoTableBar', fixed: "right", align: "center" },
                //{ field: 'num', width: 150, title: '显示条数', sort: true },
                { title: '操作', width: 180, templet: '#currentTableBar', fixed: "right", align: "center" }
            ],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 5,
            id: 'currentTableId',
        });

        $(".data-add-btn").on("click", function () {
            loadMain('/Admin/Category/AddOrEdit');
            return false;
        });

        // 全部展开
        $('#btnExpandAll').click(function () {
            insTb.expandAll();
        });

        // 全部折叠
        $('#btnFoldAll').click(function () {
            insTb.foldAll();
        });

        treeTable.on('tool(currentTableId)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                loadMain('/Admin/Category/AddOrEdit?&id=' + data.id);
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('删除确认？', function (index) {
                    $.post('/Admin/Category/Delete?id=' + data.id, function (res) {
                        if (res.status == 1) {
                            layer.msg(res.msg, { icon: 1, time: 1000 }, function () {
                                obj.del();
                                layer.close(index);
                            });
                        } else {
                            layer.msg(res.msg, { icon: 2, anim: 6, time: 5000 });
                        }
                    });
                });
            }
        });

        //监听单元格编辑
        treeTable.on('edit(currentTableId)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            $.post('/Admin/Category/EditPost?dyEdit=1&id=' + data.id, { Sort: value }, function (res) {
                if (res.status == 1) {
                    layer.msg(res.msg, { icon: 1, time: 1000 }, function () {
                        treeTable.reload('currentTableId');
                    });
                } else {
                    layer.msg(res.msg, { icon: 2, anim: 6, time: 5000 });
                }
            });
        });

    });

</script>
